import React, { useRef } from 'react'
import { Swiper, Toast } from 'antd-mobile'
import { SwiperRef } from 'antd-mobile/es/components/swiper'
import './index.less'

// components
import VerticalSwiper from './components/VerticalSwiper'

const colors = ['#ace0ff', '#bcffbd']


function App() {
  const ref = useRef<SwiperRef>(null)
  return <div className="App">
    <Swiper 
      defaultIndex={1} 
      rubberband={false} 
      style={{ height: '100vh' }}
      indicator={() => null}
    >
      <Swiper.Item>
        <div
        className="item_container"
        style={{ background: '#ace0ff' }}
        onClick={() => {
          Toast.show(`你点击了卡片111`)
        }}
      >
    </div>
      </Swiper.Item>
      <Swiper.Item>
        <VerticalSwiper/>
      </Swiper.Item>
    </Swiper>
  </div>
}

export default App
